<template>
  <zm-view ref="view">
    <zm-navbar back-icon-color="#ffffff" :border-bottom="false" background="transparent" immersive></zm-navbar>
    <view class="header-wrap">
      <image v-if="isCard" class="header-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/user-wallet-bg.png')" mode="widthFix" />
      <image v-if="isAccount" class="header-bg" :src="balanceRule.banner" mode="widthFix" />
      <view class="flex flex-col relative z-10 text-white">
        <text class="balance-text">{{ balance | formatDigit }}</text>
        <view class="text-line-1 mt-24 flex items-center">
          <text>{{ typeText }}余额</text>
          <view v-if="type === 'accoutRecharge'" class="line"></view>
          <zm-icon-text v-if="type === 'accoutRecharge'" custom-class="click-animation" name="arrow" color="#ffffff" text="充值记录" text-left @click="onClickRechargeRecord"></zm-icon-text>
        </view>
      </view>
    </view>
    <view class="content-wrap">
      <view class="flex flex-col px-24 py-32 radius-16 bg-white">
        <text v-if="isCard" class="font-32 font-bold">充值</text>
        <text v-if="isAccount" class="font-32 font-bold">{{ balanceRule.name }}</text>
        <view class="grid grid-cols-3 gap-20 mt-24">
          <!-- 余额充值 -->
          <template v-if="isAccount">
            <view
              v-for="(item, index) in balanceRule.rechargeRule"
              :key="index"
              class="recharge-item flex items-center flex-col py-30 radius-16"
              :class="{ 'is-active': index === activeIndex }"
              @click="onClickRecharge(item, index)"
            >
              <view class="flex items-end font-bold text-line-1">
                <text class="font-42">{{ item.money | formatDigit }}</text>
                <text class="font-30 mb-2">元</text>
              </view>
              <view :class="{ 'text-discount': index === activeIndex, 'text-gray': index !== activeIndex }" class="flex items-end mt-8 text-line-1">
                <text>售价 {{ item.discountMoney }}元</text>
              </view>
            </view>
          </template>
          <!-- 卡充值 -->
          <template v-if="isCard">
            <view
              v-for="(item, index) in balanceRule.rechargeRule"
              :key="index"
              class="recharge-item flex items-center justify-center py-10 flex-col radius-16"
              :class="{ 'is-active': index === activeIndex }"
              @click="onClickRecharge(item, index)"
            >
              <view class="flex items-center font-bold mb4">
                <text class="font-30">{{ item.point | formatDigit }}</text>
                <text class="font-30">点</text>
              </view>
              <view class="flex items-center justify-center">
                <view class="flex items-center mr-4">
                  <text> {{ item.reduceMoney | formatDigit }}</text>
                  <text>元</text>
                </view>
                <view v-if="balanceRule.setReduce == 1" class="flex items-center text-999 text-line-through">
                  <text> {{ item.money | formatDigit }}</text>
                  <text>元</text>
                </view>
              </view>
            </view>
          </template>
        </view>
      </view>
      <view class="flex flex-col mt-20 px-24 py-32 radius-16 bg-white">
        <text class="font-32 font-bold">充值说明</text>
        <view v-if="isCard" class="font-26 text-666 mt-24 flex flex-col">
          <text>1、用户可以在平台内进行充值，充值后即可存入余额账户，可用于购买电影票/券包/卖品。</text>
          <text>2、充值金额不可直接退现，但可以在小程序内购买其他商品。</text>
          <text>3、如果用户在充值过程中遇到任何问题，可以通过平台内的【在线客服】进行咨询； 客服人员将在第一时间为用户解决问题，服务时间：9:00-22:00(周一到周日）。</text>
        </view>
        <view v-if="isAccount" class="mt-24 flex flex-col">
          <zm-richtext :content="balanceRule.explain"></zm-richtext>
        </view>
      </view>
    </view>
    <zm-footer z-index="100" safe-area-inset-bottom>
      <view class="p-24">
        <zm-button size="large" round :disabled="activeIndex == -1" @click="submitPay">
          <text v-if="activeIndex == -1">请选择充值金额</text>
          <text v-else>充值{{ showBtnMoney | formatDigit }}{{ isCard ? "点" : "元" }}</text>
        </zm-button>
      </view>
    </zm-footer>
    <pay-way-popup ref="pay"></pay-way-popup>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import { mapActions, mapGetters } from "vuex"
export default {
  mixins: [page, hook],
  data() {
    return {
      type: "",
      payVisible: false,
      rechargePopup: false,
      rechargeItem: { money: 0, reduceMoney: 0 },
      activeIndex: -1,
      balanceRule: { rechargeRule: [] },
      payQuery: {},
      card: {
        point: 0
      },
      cardId: ""
    }
  },
  computed: {
    ...mapGetters(["userInfo", "cardName"]),
    // 是否普通电影卡充值
    isCard() {
      return this.type == "cardRecharge"
    },
    // 是否权益卡充值
    isEquityCard() {
      return this.type == "equityCard"
    },
    // 是否余额充值
    isAccount() {
      return this.type == "accoutRecharge"
    },
    // 展示金额(不含含折扣)
    showPayMoney() {
      return this.isCard ? this.rechargeItem.reduceMoney : this.rechargeItem.discountMoney
    },
    // 金额(含折扣)
    vipDiscountMoney() {
      return this.isCard ? this.rechargeItem.reduceMoney : this.rechargeItem.vipMoney
    },
    // 展示账户/卡余额
    balance() {
      return this.isCard ? this.card.point : this.userInfo.balance
    },
    // 实际支付的金额
    payMoney() {
      return this.rechargeItem.money
    },
    typeText() {
      return this.type == "accoutRecharge" ? "我的" : this.type == "cardRecharge" ? this.cardName : "权益卡"
    },
    showBtnMoney() {
      return this.isCard ? this.rechargeItem.point : this.rechargeItem.money
    }
  },
  onLoad(options) {
    this.type = options.type || "accoutRecharge"

    if (!this.isEquityCard) {
      this.handleGetBalanceRule()
    }
    if (this.isCard) {
      this.cardId = options.cardId
      this.handleGetInfo()
    }
  },
  methods: {
    onClickRecharge(item, index) {
      this.rechargeItem = item
      this.activeIndex = index
    },
    async handleGetInfo() {
      this.card = await uni.$api.card.getCardInfo({ cardId: this.cardId })
    },
    onClickRechargeRecord() {
      this.toView({
        url: "pages/person/user-wallet-record/user-wallet-record"
      })
    },
    async handleGetBalanceRule() {
      const apiModel = this.isCard ? "card" : "balance"
      const apiName = this.isCard ? "getRechargeRule" : "getBalanceRule"
      // v3.0.1版本传 接口参数添加 v2
      const params = apiName === "getBalanceRule" ? { version: "v2" } : {}
      this.balanceRule = await uni.$api[apiModel][apiName](params)
      if (this.balanceRule?.rechargeRule?.length) {
        this.activeIndex = 0
        this.rechargeItem = this.balanceRule.rechargeRule[0]
      }
    },
    submitPay() {
      let query = {}
      if (this.isCard) {
        query = {
          programId: this.balanceRule.programId,
          point: this.rechargeItem.point,
          ruleKey: this.rechargeItem.ruleKey,
          cardId: this.cardId
        }
      }
      this.$refs.pay.open({
        query,
        orderType: this.type,
        showNeedPay: this.showPayMoney,
        vipDiscountMoney: this.vipDiscountMoney,
        preInfo: {
          needPay: this.payMoney
        },
        success: (res) => {
          this.getUserInfo()
          if (this.isCard) {
            uni.navigateBack({ delta: 2 })
          } else if (this.isAccount) {
            this.toView({
              url: "pages/order/order-recharge-info/order-recharge-info",
              params: {
                orderId: res.orderId,
                orderType: 1
              },
              type: "redirectTo"
            })
          }
        }
      })
    },
    ...mapActions(["getUserInfo"])
  }
}
</script>

<style lang="scss" scoped>
.header-wrap {
  height: 443rpx;
  display: flex;
  padding: 30rpx;
  position: relative;
  padding-bottom: 80rpx;
  align-items: flex-end;
  .header-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 443rpx;
    position: absolute;
  }
  .balance-text {
    font-size: 70rpx;
    font-weight: bold;
  }
  .line {
    height: 26rpx;
    margin: 0 20rpx;
    border-right: 2rpx solid #fff;
  }
}
.content-wrap {
  padding: 24rpx;
  z-index: 11;
  position: relative;
  margin-top: -24rpx;
  border-radius: 16rpx;
  background-color: var(--page-color);
  .recharge-item {
    border: 2rpx solid #cccccc;
    &.is-active {
      color: var(--theme-color);
      border: 2rpx solid var(--theme-color);
      background-color: rgba(255, 117, 56, 0.1);
    }
  }
}
</style>
